<html>
<head>
    <title>项目维护</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }
        .chart-outer{
            height: 200px;
        }
        .mapInput{
            height:40px;line-height:40px
        }

    </style>
</head>
<body>
<div  class="page" id="page-elesafe">

    <div class="page-title">项目维护</div>
    <div class="page-main">

    <el-row>
        <el-col :span="4">
            <dev-tree v-on:click-node="userNode" :tabSign="'u'" ></dev-tree>
        </el-col>
        <el-col :span="20">
            <div class="page-head" style="margin-top: 50px;">
                <el-form :inline="true" ref="form1" :model="form" >
                    <el-form-item label="">
                        <el-input v-model="proName" placeholder="请输入项目名称关键字" style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" style="background-color: #578BBB">搜索</el-button>
                    </el-form-item>
                    <el-form-item style="padding-left: 15px">
                        <el-button  type="primary" style="background-color: #578BBB">合同总量</el-button>
                        <el-input  style="width: 120px" v-model="form1.count"></el-input>
                        <el-button  type="primary" style="background-color: #578BBB" >至</el-button>
                        <el-input  style="width: 120px"  v-model="form1.count1"></el-input>
                    </el-form-item>
                    <div style="float: right">
                        <el-form-item>
                            <el-button size="small" type="primary"  @click="addClick">新增</el-button>
                            <el-button  size="small" @click="editClick">编辑</el-button>
                            <el-button size="small" type="info" @click="delClick">删除</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <el-table border stripe style="width: 100%" :data="proData"    v-loading="loading" highlight-current-row  @current-change="handleSelectionChange">
                <el-table-column prop="projectName" label="项目名称" align="center">
                </el-table-column>
                <el-table-column prop="companyName" label="售电公司" align="center">
                </el-table-column>
                <el-table-column prop="siginTime" label="签订时间" align="center" width="180">
                </el-table-column>
                <el-table-column prop="username" label="所属业主" align="center">
                </el-table-column>
                <el-table-column  label="所在地" align="center"  width="200">
                    <template slot-scope="scope">{{ scope.row.province + scope.row.city + scope.row.zone}}</template>
                </el-table-column>
                <el-table-column prop="manager" label="联系人" align="center" >
                </el-table-column>
                <el-table-column prop="phone" label="联系电话" align="center"  width="180">
                </el-table-column>

            </el-table>
            <div class="page-footer" style="left: auto">
                <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page.sync="currentPage" @current-change="onChangePage">
                </el-pagination>
            </div>
        </el-col>
    </el-row>

    <el-dialog  :title="editMod?'编辑售电用户':'新增售电用户'" :visible.sync="dialogFormVisible" center width="35%"  :show-close="false">
        <el-dialog
                title="定位查询"
                fullscreen="true"
                :visible.sync="innerVisible"
                :before-close="mapClose"
                append-to-body>
            <div style="width:730px;margin:auto;font-size: 15px">
            要查询的地址：<input class="mapInput" id="text_" type="text" />
                <input type="button" class="mapInput" value="查询" @click="searchByStationName()" />
            查询结果(经纬度)：<input class="mapInput" id="result_" type="text" />
                <input type="button" class="mapInput" value="确定" @click="innerVisible=false" />
            <div id="container"
            style="position: absolute;
            width: 730px;
            height: 590px;
            border: 1px solid gray;
            overflow:scroll;">
            </div>
            </div>
        </el-dialog>

        <el-form :model="form" ref="form" :label-position="labelPosition" >
            <el-form-item label="项目名称" prop="projectName" :label-width="formLabelWidth"  :rules="[
                             {required:true,message:'项目名称不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.projectName"  autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="售电公司:"  prop="comCode" :label-width="formLabelWidth"  :rules="[
                             {required:true,message:'售电公司不能为空!',trigger:'blur'}
                            ]">
                <el-select v-model="form.comCode" placeholder="请选择公司" style="width: 100%;">
                    <el-option
                            v-for="item in companyList"
                            :key="item.companyCode"
                            :label="item.companyName"
                            :value="item.companyCode">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="签订时间:"
                          prop="siginTime" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'签订时间不能为空!',trigger:'blur'}
                            ]">
                <el-date-picker
                        v-model="form.siginTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="所属业主" prop="projectOwner" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'用户不能为空!',trigger:'blur'}
                            ]">
                <el-select v-model="form.projectOwner" placeholder="请选择用户" style="width: 100%;">
                <el-option
                        v-for="item in childUsers"
                        :key="item.Id"
                        :label="item.Text"
                        :value="item.Id">
                </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在地:" :label-width="formLabelWidth" >
              <el-col :span="8">
                  <el-select   v-model="form.province"  @change="provinceChange">
                      <el-option
                              v-for="item in provinceArr"
                              :key="item.id"
                              :label="item.name"
                              :value="item.name"
                             >
                      </el-option>
                  </el-select>
              </el-col>
                <el-col :span="8">
                    <el-select   v-model="form.city"  @change="cityChange">
                        <el-option
                                v-for="item in cityArr"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name"
                               >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select   v-model="form.zone" @change="zoneChange">
                        <el-option
                                v-for="item in zoneArr"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name"
                               >
                        </el-option>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="地区:" prop="address" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'地区不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.address"  autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="经度:" prop="lng" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'经度不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.lng"  autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="纬度:" prop="lat" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'纬度不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.lat"  autocomplete="off" ></el-input>
                <el-button style="margin-top: 10px"  type="primary" @click="getPosition()">定位</el-button>
            </el-form-item>
            <el-form-item label="用户联系人:" prop="manager" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'用户联系人不能为空!',trigger:'blur'}]">
                <el-input v-model="form.manager" autocomplete="off"   ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'联系电话不能为空!',trigger:'blur'}]">
                <el-input v-model="form.phone" autocomplete="off"   ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelClick('form')" style="background-color: #7eb8b0">取 消</el-button>
            <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
        </div>
    </el-dialog>
</div>
</div>



<script type="text/javascript" src="../../../js/citydata.js" charset="utf-8"></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<script>

    var vuePage=new Vue({
        el:'#page-elesafe',
        data:{
            expandId:'',
            formLabelWidth: '120px',
            day:'',
            proData:'',
            dialogFormVisible:false,
            innerVisible:false,
            currentPage:1,
            form:{
            },
            form1:{
                count:'206',
                count1:'2356'
            },
            editMod:false,
            labelPosition:'left',
            companyList:'',
            multipleSelection:'',
            proName:'',
            loading:true,
            localSearch:'',
            mapView:'',
            priceCase:'',
            childUsers:'',
            elprice:'',
            totalCount:'',
            provinceArr:[],
            cityArr:[],
            zoneArr:[],
        },
        methods:{
            search:function(){
                this.loading = true;
                this.getPro({projectName: this.proName});
            },
            userNode:function(data){
                this.loading = true;
                this.getPro({UserId:data.dataId});
            },
            addClick:function(){
                this.editMod = false;
                this.dialogFormVisible=true;
            },
            getPosition(){
                this.innerVisible=true;

                setTimeout(() => {
                    var adrr = this.form.province + this.form.city + this.form.zone;
                    document.getElementById("text_").value = adrr ? adrr:'';
                        this.getMap();
                }, 1);

            },
            mapClose(done){
                document.getElementById("text_").value = '';
                document.getElementById("result_").value = '';
                done();
            },
            getMap(){
                var map = new BMap.Map("container");
                map.centerAndZoom("杭州", 12);
                map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
                map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
                map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开
                this.localSearch = new BMap.LocalSearch(map);
                this.mapView =  map;
            },
            searchByStationName(){
                this.mapView.clearOverlays();//清空原来的标注
                var keyword = document.getElementById("text_").value;
                this.localSearch.setSearchCompleteCallback( (searchResult) => {
                    var poi = searchResult.getPoi(0);
                    document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
                    this.mapView.centerAndZoom(poi.point, 13);
                    var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
                    this.mapView.addOverlay(marker);
                    var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
                    var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                    marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
                    // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    this.form.lng = poi.point.lng;
                    this.form.lat = poi.point.lat;
                });
                this.localSearch.search(keyword);
            },
            editClick(){

                if ( this.multipleSelection==''|| this.multipleSelection==null){
                    this.$message({
                        type: 'warning',
                        message: '没有选择联网单位!'
                    });
                }else{
                    this.editMod = true;
                    this.form = this.multipleSelection;
                    this.form = {
                        Id:this.multipleSelection.Id,
                        projectNo:this.multipleSelection.projectNo,
                        projectName : this.multipleSelection.projectName,
                        comCode:this.multipleSelection.comCode,
                        siginTime:this.multipleSelection.siginTime,
                        projectOwner:this.multipleSelection.projectOwner,
                        province:this.multipleSelection.province,
                        city:this.multipleSelection.city,
                        zone:this.multipleSelection.zone,
                        address:this.multipleSelection.address,
                        lng:this.multipleSelection.lng,
                        lat:this.multipleSelection.lat,
                        primary:this.multipleSelection.primary,
                        manager:this.multipleSelection.manager,
                        phone:this.multipleSelection.phone,
                        contractNo:this.multipleSelection.contractNo,
                        contractPower:this.multipleSelection.contractPower,
                        decline:this.multipleSelection.decline,
                        registry:this.multipleSelection.registry,
                        userNumber:this.multipleSelection.userNumber,
                        license:this.multipleSelection.license,
                        signingPeriod:this.multipleSelection.signingPeriod,
                        waybillnumber:this.multipleSelection.waybillnumber,
                        legalMan:this.multipleSelection.legalMan,
                        legalID:this.multipleSelection.legalID,
                        location:this.multipleSelection.location,
                        socialID:this.multipleSelection.socialID,
                        remarks:this.multipleSelection.remarks
                    }
                    HttpUtil.get('Zone/Child',{parentName:this.form.province,level:'city'}).success((res)=>{
                        this.cityArr = res.data;
                        HttpUtil.get('Zone/Child',{parentName:this.form.city,level:'district'}).success((res)=>{
                            this.zoneArr = res.data;
                            this.dialogFormVisible=true;
                        })
                    });
                }

            },
            delClick() {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    HttpUtil.get('Project/DeleteAll',{Id:this.multipleSelection.id}).success((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        console.log(this.form);
                        if (this.editMod){
                            HttpUtil.get('Project/Update',this.form).success((res)=>{
                                this.getPro();
                                this.cancelClick(formName);
                                this.$message({
                                    type:'success',
                                    message:'修改成功'
                                })
                            });
                        } else {

                            HttpUtil.get('Project/Add',this.form).success((res)=>{
                                this.getPro();
                                this.cancelClick(formName);
                                this.$message({
                                    type:'success',
                                    message:'保存成功'
                                })
                            });
                        }


                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }

                });

            },
            //分页
            onChangePage(page){
                this.getPro({pageno:page,pagesize: 10});
            },
            //关闭弹窗时清空表单数据
            cancelClick(formName){
                this.form={};
                this.dialogFormVisible = false;

            },
            provinceChange(value){
                HttpUtil.get('Zone/Child',{parentName:value,level:'city'}).success((res)=>{
                    this.form.city = '';
                    this.cityArr = res.data;

                })
            },
            cityChange(value){
                HttpUtil.get('Zone/Child',{parentName:value,level:'district'}).success((res)=>{
                    this.zoneArr = res.data;

                })
            },
            zoneChange(value){
              console.log(this.form.zone);
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            //导入按钮
            importInfo(){

            },
            //导出按钮
            exportInfo(){

            },
            getPro(params){
                HttpUtil.get('Project/List',params).success((res)=>{
                    this.loading = false;

                    res.data.forEach(item => {
                        item.checked = false
                    })
                    this.proData = res.data;
                    this.totalCount =res.total;
                });
            },
        },
        created:function(){

        },
        mounted:function(){
            this.options = CityInfo;
            this.day = TimeUtil.convertToString(new Date()).substr(0,10);
            this.getPro({UserId:SiteConfig.account.id});
            HttpUtil.get('Zone/Child',{parentName:'中国',level:'province'}).success((res)=>{
                this.provinceArr = res.data;
            })
            HttpUtil.get('Company/List',{pageno:1,pagesize: 200}).success((res)=>{
                this.companyList = res.data;
            });
            HttpUtil.get('User/Child').success((data)=> {
                this.childUsers = data.data;
            });
            HttpUtil.get('EnergyPrice/List').success((res)=>{
                this.elprice = res.data;
            })
        }
    });


</script>

</body>
</html>
